<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾dom操作</title>
</head>
<body>
    <!-- 
        回顾的是先操作元素,还是后操作元素.
     -->
    <button>创建一个输入框</button>
</body>
<script>
    
    var but = document.querySelector('button')
    but.onclick = ()=>{
        const input = document.createElement('input')
        //有些样式能放在之前奏效
        input.style.height = '70px';
        input.value = '111';
        document.body.appendChild(input)
        //有些样式,只有放到页面上了才能去执行
        input.focus()
        input.parentElement.style.backgroundColor = 'skyblue'
    }
</script>
</html>